<!DOCTYPE html>
<!-- saved from url=(0059)http://lokeshdhakar.com/projects/lightbox2/#getting-started -->
<html lang="en-us"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">

    <title>Lightbox</title>

    <meta name="description" lang="en" content="Lightbox is a script used to overlay images on the current page. It&#39;s a snap to setup and works on all modern browsers.">
    <meta name="author" content="Lokesh Dhakar">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" href="http://lokeshdhakar.com/projects/lightbox2/images/favicon.png">

    <link rel="stylesheet" href="./Lightbox_files/css">
    <link rel="stylesheet" href="./Lightbox_files/screen.css">
    <link rel="stylesheet" href="./Lightbox_files/lightbox.css">

  <script type="text/javascript" charset="utf-8" async="" src="./Lightbox_files/button.0317b7570df4f1e40626c32ea11afc85.js"></script></head>
  <body>

    <nav id="nav" class="nav">
      <a href="http://lokeshdhakar.com/projects/lightbox2/#examples" class="nav-item">Examples</a>
      <a href="./Lightbox_files/Lightbox.html" class="nav-item">Getting started</a>
      <a href="http://lokeshdhakar.com/projects/lightbox2/#options" class="nav-item">Options</a>
      <a href="http://lokeshdhakar.com/projects/lightbox2/#browser-support" class="nav-item">Browser support</a>
      <a href="http://lokeshdhakar.com/projects/lightbox2/#license" class="nav-item">License</a>
      <a href="http://lokeshdhakar.com/projects/lightbox2/#help" class="nav-item">Help</a>
    </nav>

    <div class="content">


      <!-- HEADER -->

      <header id="download">
        <div class="container">
          <h1 class="logo">
          <img src="./Lightbox_files/picture.svg" class="picture-icon" alt="Icon indicating an image">Lightbox
        </h1>
          <a href="https://twitter.com/lokesh" class="logo-credit">by Lokesh Dhakar</a>
          <p class="lead">
            The original lightbox script.
            <br>Eight years later — still going strong!
          </p>
          <div class="primary-actions">
            <a href="https://github.com/lokesh/lightbox2/archive/master.zip" class="button">
              Download
            </a>
            <a href="https://github.com/lokesh/lightbox2/" class="button">
            View on Github
          </a>
          </div>
        </div>
      </header>


      <!-- EXAMPLES -->

      <section id="examples" class="examples-section">
        <div class="container">

          <h2>Examples</h2>
          <h3>Two individual images</h3>
          <div class="image-row">
            <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-1.jpg" data-lightbox="example-1"><img class="example-image" src="./Lightbox_files/thumb-1.jpg" alt="Girl looking out people on beach"></a>
            <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-2.jpg" data-lightbox="example-2" data-title="Optional caption."><img class="example-image" src="./Lightbox_files/thumb-2.jpg" alt="Two men in bicycle jerseys sitting outside at table having coffee"></a>
          </div>
          <hr>
          <h3 style="clear: both;">Four image set</h3>
          <div class="image-row">
            <div class="image-set">
              <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="./Lightbox_files/thumb-3.jpg" alt="Golden Gate Bridge with San Francisco in distance"></a>
              <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="./Lightbox_files/thumb-4.jpg" alt="Forest with mountains behind"></a>
              <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you&#39;re viewing."><img class="example-image" src="./Lightbox_files/thumb-5.jpg" alt="Bicyclist looking out over hill at ocean"></a>
              <a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="./Lightbox_files/thumb-6.jpg" alt="Small lighthouse at bottom with ocean behind"></a>
            </div>
          </div>
        </div>
      </section>


      <!-- GETTING STARTED -->

      <section id="getting-started" class="getting-started-section">
        <div class="container">
          <h2>Getting started</h2>

          <ol class="getting-started-list">
            <li>
              <p><a href="https://github.com/lokesh/lightbox2/archive/master.zip">Download the latest version</a><br>
              (Also available via Bower: <code>bower install lightbox2 --save</code>)</p>
            </li>
            <li>
              <p>Open up the zip file and take a peek at the barebones, working example that is included in the <code>/examples</code> folder.</p>
            </li>
            <li>
              <p>Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the <code>/dist</code> folder.</p>
              <ul>
                <li>Include the CSS at the top of your page in your <code>&lt;head&gt;</code> tag:
<pre><code>&lt;link <span class="hljs-variable">href=</span><span class="hljs-string">"path/to/lightbox.css"</span> <span class="hljs-variable">rel=</span><span class="hljs-string">"stylesheet"</span>&gt;</code></pre>
</li>
<li>Include the Javascript at the bottom of your page before the closing <code>&lt;/body&gt;</code> tag:
<pre><code class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"path/to/lightbox.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span></code></pre>
</li>
</ul>
            </li>
            <li>
              <p>Make sure jQuery, which is required by Lightbox, is also loaded.</p>
              <ul>
                <li>If you already use jQuery on your page, make sure it is loaded before <code>lightbox.js</code>. jQuery 1.7 or greater is required.</li>
                <li>If you are not currently using jQuery, I've created a packaged file that includes both Lightbox and jQuery. Include <code>dist/js/lightbox-plus-jquery.js</code> instead of <code>lightbox.js</code>.</li>
              </ul>
            </li>
            <li>Confirm that the four images loaded by <code>lightbox.css</code> are in the correct location. You can grab the images from the <code>/dist/images</code> folder.
          </li></ol>

          <h3>Initialize with HTML</h3>
          <ul>
            <li>Add a <code>data-lightbox</code> attribute to any image link to enable Lightbox. For the value of the attribute, use a unique name for each image. For example:
<pre><code class="xml">&lt;a <span class="hljs-variable">href=</span><span class="hljs-string">"images/image-1.jpg"</span> <span class="hljs-variable">data-lightbox=</span><span class="hljs-string">"image-1"</span> <span class="hljs-variable">data-title=</span><span class="hljs-string">"My caption"</span>&gt;Image <span class="hljs-comment">#1&lt;/a&gt;</span></code></pre>
              <em>Optional:</em> Add a <code>data-title</code> attribute if you want to show a caption.
            </li>
            <li>If you have a group of related images that you would like to combine into a set, use the same <code>data-lightbox</code> attribute value for all of the images. For example:
<pre><code class="xml">&lt;a <span class="hljs-variable">href=</span><span class="hljs-string">"images/image-2.jpg"</span> <span class="hljs-variable">data-lightbox=</span><span class="hljs-string">"roadtrip"</span>&gt;Image <span class="hljs-comment">#2&lt;/a&gt;</span>
&lt;a <span class="hljs-variable">href=</span><span class="hljs-string">"images/image-3.jpg"</span> <span class="hljs-variable">data-lightbox=</span><span class="hljs-string">"roadtrip"</span>&gt;Image <span class="hljs-comment">#3&lt;/a&gt;</span>
&lt;a <span class="hljs-variable">href=</span><span class="hljs-string">"images/image-4.jpg"</span> <span class="hljs-variable">data-lightbox=</span><span class="hljs-string">"roadtrip"</span>&gt;Image <span class="hljs-comment">#4&lt;/a&gt;</span></code></pre>
            </li>
          </ul>
        </div>
      </section>


      <!-- OPTIONS -->

      <section id="options" class="options-section">
        <div class="container">
          <h2>Options</h2>

          <p>If you want to change any of the default options, call the option method.</p>
<pre class="options-code"><code class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="sml">
    lightbox.<span class="hljs-built_in">option</span>({
      <span class="hljs-symbol">'resizeDuration'</span>: <span class="hljs-number">200</span>,
      <span class="hljs-symbol">'wrapAround'</span>: <span class="hljs-literal">true</span>
    })
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span></code></pre>

          <table class="options-table">
            <thead>
              <tr>
                <th>Option</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>alwaysShowNavOnTouchDevices</td>
                <td data-label="Default:" class="default-row">false</td>
                <td>If true, the left and right navigation arrows which appear on mouse hover when viewing image sets will always be visible on devices which support touch.</td>
              </tr>
              <tr>
                <td>fadeDuration</td>
                <td data-label="Default:" class="default-row">500</td>
                <td>The time it takes for the Lightbox container and overlay to fade in and out, in milliseconds.</td>
              </tr>
              <tr>
                <td>fitImagesInViewport</td>
                <td data-label="Default:" class="default-row">true</td>
                <td>If true, resize images that would extend outside of the viewport so they fit neatly inside of it. This saves the user from having to scroll to see the entire image.</td>
              </tr>
              <tr>
                <td>maxWidth</td>
                <td data-label="Default:" class="default-row">&nbsp;</td>
                <td>If set, the image height will be limited to this number, in pixels. Aspect ratio will not be maintained.</td>
              </tr>
              <tr>
                <td>maxHeight</td>
                <td data-label="Default:" class="default-row">&nbsp;</td>
                <td>If set, the image width will be limited to this number, in pixels. Aspect ratio will not be maintained.</td>
              </tr>
              <tr>
                <td>positionFromTop</td>
                <td data-label="Default:" class="default-row">50</td>
                <td>The distance from top of viewport that the Lightbox container will appear, in pixels.</td>
              </tr>
              <tr>
                <td>resizeDuration</td>
                <td data-label="Default:" class="default-row">700</td>
                <td>The time it takes for the Lightbox container to animate its width and height when transition between different size images, in milliseconds.</td>
              </tr>
              <tr>
                <td>showImageNumberLabel</td>
                <td data-label="Default:" class="default-row">true</td>
                <td>If false, the text indicating the current image number and the total number of images in set (Ex. "image 2 of 4") will be hidden.</td>
              </tr>
              <tr>
                <td>wrapAround</td>
                <td data-label="Default:" class="default-row">false</td>
                <td>If true, when a user reaches the last image in a set, the right navigation arrow will appear and they will be to continue moving forward which will take them back to the first image in the set.</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>


      <!-- BROWSER SUPPORT -->

      <section id="browser-support" class="browser-support-section">
        <div class="container">
          <h2>Browser support</h2>
          <p>Lightbox2 has been tested successfully in the following browsers:</p>
          <ul>
            <li><strong>Internet Explorer.</strong><br>The <code>lightbox-plus-jquery.js</code> file includes jQuery v2.x and supports IE 9+. If you want to support IE 6, 7, and 8, use your own copy of jQuery v1.x with <code>lightbox.js</code>.</li>
            <li><strong>Chrome</strong></li>
            <li><strong>Safari</strong></li>
            <li><strong>Firefox</strong></li>
            <li><strong>iOS Safari</strong></li>
            <li><strong>iOS Chrome</strong></li>
            <li><strong>Android Browser</strong></li>
            <li><strong>Android Chrome</strong></li>
          </ul>
        </div>
      </section>


      <!-- LICENSE -->

      <section id="license" class="license-section">
        <div class="container">
          <h2>License</h2>
          <p>Lightbox2 is licensed under <a href="https://raw.githubusercontent.com/lokesh/lightbox2/master/LICENSE">The MIT License</a>.</p>
          <ul>
            <li><strong>100% Free.</strong> Lightbox is free to use in both commercial and non-commercial work.</li>
            <li><strong>Attribution is required.</strong>This means you must leave my name, my homepage link, and the license info intact. None of these items have to be user-facing and can remain within the code.</li>
          </ul>
        </div>
      </section>

      <section id="help" class="help-section">
        <div class="container">
          <h2>Help</h2>

          <h3>Have a question about how to use Lightbox?</h3>
          <p>Follow the steps below to get help. Make sure you have read the documentation on this page and looked at the included example first.</p>
          <ol>
            <li>Search <a href="http://stackoverflow.com/questions/tagged/lightbox2">Stackoverflow</a> to see if other people have run into the same issue you are having.</li>
            <li>If your issue is unique, then <a href="http://stackoverflow.com/questions/ask">post a new question on Stackoverflow</a>. Use the <code>lightbox2</code> tag.</li>
          </ol>
          <p>Do not use Github Issues to report personal support requests.</p>

          <h3>Found a bug?</h3>
          <p>If you find a bug, follow the instructions in the <a href="https://github.com/lokesh/lightbox2/blob/master/CONTRIBUTING.md#found-a-bug">Contribution Guildelines</a> to report the issue.</p>

        </div>
      </section>


      <!-- FOOTER -->

      <footer>
        <div class="container">
          <p>
            Created by Lokesh Dhakar
            <br>
            <a href="https://twitter.com/lokesh" class="button">Follow me on Twitter</a>
          </p>
        </div>
      </footer>

    </div><!-- .content -->

    <div id="sharing" class="sharing-section">
      <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" title="Twitter Tweet Button" src="./Lightbox_files/tweet_button.html" style="position: static; visibility: visible; width: 113px; height: 27px;"></iframe>
    </div>


    <!-- LIGHTBOX PLUS JQUERY -->

    <script id="twitter-wjs" src="./Lightbox_files/widgets.js"></script><script type="text/javascript" async="" src="./Lightbox_files/ga.js"></script><script src="./Lightbox_files/lightbox-plus-jquery.min.js"></script><div id="lightboxOverlay" class="lightboxOverlay" style="display: none;"></div><div id="lightbox" class="lightbox" style="display: none;"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src=""><div class="lb-nav"><a class="lb-prev" href=""></a><a class="lb-next" href=""></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>


    <!-- SMOOTH SCROLLING -->

    <script>
      $(function() {
        $('#nav').on('click', '.nav-item', function(event) {
          event.preventDefault();
          var hash = this.hash;

          $('html, body').animate({
           scrollTop: $(hash).offset().top
          }, 1000, function() {
            window.location.hash = hash;
          });
        });
      });

    </script>

    <!-- GOOGLE ANALYTICS -->

    <script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-2196019-1']);
    _gaq.push(['_trackPageview']);
    (function()
    {
      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
    })();
    </script>


    <!-- TWITTER SHARE WIDGET -->

    <script>
    ! function(d, s, id)
    {
      var js, fjs = d.getElementsByTagName(s)[0],
        p = /^http:/.test(d.location) ? 'http' : 'https';
      if (!d.getElementById(id))
      {
        js = d.createElement(s);
        js.id = id;
        js.src = p + '://platform.twitter.com/widgets.js';
        fjs.parentNode.insertBefore(js, fjs);
      }
    }(document, 'script', 'twitter-wjs');
    </script>

  

</body></html>